<template>
  <div class="tabapp">
    <div class="header" v-if="flag">
      <div style="float: left">
        创建时间 &emsp;
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始"
          end-placeholder="结束"
        />
        &emsp; 车次类型
        <el-select v-model="value" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div
        style="
          float: right;
          display: flex;
          margin-top: 15px;
          margin-right: 15px;
        "
      >
        <el-checkbox label="启用" />
        <el-input
          v-model="input"
          :prefix-icon="Search"
          style="width: 130px; margin: 0 20px"
          placeholder="搜索ID/车次"
        />
        <el-button size="large" color="#1ba9ba" @click="add">
          <img
            src="@/assets/Icons/png/新建白色.png"
            style="width: 30px"
            alt=""
          />
          <span style="color: white; margin-left: 3px">新增车次</span>
        </el-button>
      </div>
    </div>
    <div class="header1" v-else>
      <div class="left">
        <div class="kong"></div>
        <div>新建车次</div>
      </div>
      <div class="right">
        <el-button class="btn1" @click="goBack" type="primary">返回</el-button>
        <el-button class="btn" type="primary">
          <img src="@/assets/Icons/png/提交.png" /> 提交
        </el-button>
      </div>
    </div>
    <div style="width: 100%">
      <MyTable
        v-if="flag"
        @fatherdelete="deleterow"
        @fatherset="setflag"
        @fatheredit="edit"
        :table-data="listcar"
        :column-data="columnData"
      ></MyTable>
      <div v-else>
        <main>
          <div class="carAddComponentMainBasisInfo">基本信息</div>
          <div class="carAddComponentMainFormBox">
            <div class="carTypeCom">
              <span class="demonstration">车次类型</span>
              <div class="xiala">
                <el-select v-model="value" class="m-2" placeholder="全部">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="carAddComponentMainCarMaster">
              <div class="carAddComponentMainCarMasterText">车次</div>
              <input
                class="carAddComponentMainCarMasterInp"
                type="text"
                placeholder="请输入车次"
              />
            </div>
            <div class="carAddComponentMainCarMaster">
              <div class="carAddComponentMainCarMasterText">车长</div>
              <input
                class="carAddComponentMainCarMasterInp"
                type="text"
                placeholder="请输入姓名"
              />
            </div>
          </div>
          <div class="carAddComponentMainTextBox">
            <TextCom />
          </div>
          <div class="carAddComponentMainTableBox">
            <CarAddtable />
          </div>
        </main>
      </div>
    </div>
    <div class="alert" v-show="isalert">
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
      >
        <el-form-item label="车长">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="车厢数量">
          <el-input v-model="formLabelAlign.xiannum" />
        </el-form-item>
        <el-form-item label="限乘人数">
          <el-input v-model="formLabelAlign.count" />
        </el-form-item>
        <div style="text-align: center;cursor: pointer;" @click="butclick">提交</div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyTable from "@/components/MyTable.vue";
import CarAddtable from "./compontent/addtable.vue";
import TextCom from "./compontent/TextCom.vue";
import { Search } from "@element-plus/icons-vue";
import { listcount, useCounterStore } from "@/store/counter";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const labelPosition = ref('right')
let isalert = ref(false)

  const formLabelAlign = ref(
    { id: 0,
     cartype:'' ,
     name: '',
     allnum: '',
     flag:true ,
     xiannum: 0,
     count:'' ,
     createdate: '',
   }
  )

const columnData = [
  {
    prop: "id",
    label: "ID",
    width: "",
  },
  {
    prop: "cartype",
    label: "车次/类型",
    width: "100",
  },
  {
    prop: "name",
    label: "车长",
    width: "",
  },
  {
    prop: "allnum",
    label: "总座位数",
    width: "",
  },
  {
    prop: "xiannum",
    label: "车厢数量",
    width: "",
  },
  {
    prop: "count",
    label: "限乘人数",
    width: "",
  },
  {
    prop: "createdate",
    label: "创建时间",
    width: "200",
  },
];
const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
]);
const input = ref("");
const value = ref("全部");
const flag = ref(true);
const options = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "高速动车",
  },
  {
    value: "Option3",
    label: "火车",
  },
];
const store = useCounterStore();
const { listcar } = storeToRefs(store);

const deleterow = (row: listcount) => {
  console.log(row);
  store.carnumdelete(row.id);
};
const setflag = (row: listcount) => {
  console.log(row);
  store.carnumsetflag(row.id);
};
const edit = (row: any) => {
  isalert.value=true
  console.log(row);
  formLabelAlign.value ={...row}
};
const add =()=>{
  flag.value = false
}
const goBack=()=>{
  flag.value = true
}
const butclick =()=>{
  isalert.value=false
  store.carnumedit(formLabelAlign.value)
}
</script>

<style scoped lang="scss">
.tabapp {
  width: calc(100% - 20px);
  height: calc(100vh - 80px);
  margin-left: 10px;
  margin-top: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.1);
  border-radius: 2px;
  border: 1px solid #ccc;
  overflow: hidden;
  overflow-y: scroll;
}
.header {
  width: 100%;
  height: 110px;
  line-height: 66px;
  padding: 30px 20px;
  overflow: hidden;
}
.m-2 {
  width: 100px;
}
.header1 {
  display: flex;
  justify-content: space-between;
  padding: 30px;
  border-bottom: 10px solid #e4e5e7;
  .left {
    display: flex;
    color: #26b6c6;
    font-size: 25px;
    font-weight: bolder;
    border-left: 4px solid #1ba9ba;
    .kong {
      width: 10px;
    }
  }
  .right {
    .btn1 {
      background: white;
      color: #1ba9ba;
      border: 2px solid #1ba9ba;
      width: 80px;
    }
    .btn {
      background: #1ba9ba;
      img {
        width: 30px;
      }
    }
  }
}
.carAddComponentMainBasisInfo {
  height: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color: #303849;
  margin: 10px 0 15px 25px;
}
.carAddComponentMainFormBox,
.carTypeCom,
.carAddComponentMainCarMaster {
  display: flex;
  height: 30px;
  line-height: 30px;
  margin-left: 30px;
}
.xiala {
  width: 100px;
  margin-left: 10px;
}
.carAddComponentMainCarMasterInp {
  width: 100px;
  margin-left: 10px;
  border: 1px solid rgb(222, 222, 222);
  border-radius: 5px;
  padding-left: 5px;
}
.carAddComponentMainTextBox {
  margin: 20px 0;
  padding-left: 60px;
}
.carAddComponentMainTableBox {
  padding: 0px 30px;
}
.alert {
  border: #1ba9ba 1px solid;
  position: fixed;
  background: white;
  top: 100px;
  left: 600px;
  z-index: 999;
}
</style>
